<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>倩狐弹幕</title>
    <script src="../static/jquery-3.0.0.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body bgcolor="black">
    <div class="barrager">
    </div>
    <script type="text/javascript">
        var barrager, fail = 0;
        $(function () {
            barrager = $(".barrager").barrager();

            function extracted() {
                $.ajax({
                    url: "/wechat/Barrager/show",
                    type: "POST",
                    dataType: "json",
                    timeout: 1000,
                    success: function (data) {
                        if (data.items.length > 0) {
                            $(data.items).each(function (index, item) {
                                barrager.addBarrager(item);
                            })
                            fail = 0;
                        } else {
                            fail++;
                            if (fail % 3 === 0) {
                                barrager.addBarrager({
                                    avatarUrl: barrager.getReandomLogo(),
                                    note: barrager.getReandomBuilt(),
                                    style: barrager.getReandomRocket()
                                });
                            }
                        }
                    },
                    complete: function () {
                        fail++;
                        if (fail % 3 === 0) {
                            barrager.addBarrager({
                                avatarUrl: barrager.getReandomLogo(),
                                note: barrager.getReandomBuilt(),
                                style: barrager.getReandomRocket()
                            });
                        }
                        setTimeout(() => extracted(), 3200);
                    }
                });
            }

            setTimeout(() => extracted(), 3200);
        });
        (function () {
            var Barrager = function (ele, options) {
                var defaults = {
                    built: ["我的女神温柔美丽", "倩狐我最爱", "气质型温婉而雅", "美，不至于形", "倩狐IT的小哥哥们,爱你们哦！", "倩狐666！2019加油！", "倩狐的女神,比心♥！"],
                    color: ["#ff9999", "#35d2f4", "#9ee353", "#9d77ff", "#4785d9", "#ff9333", "#5bdea8", "#51befc"],
                    rocket: ["rocketRed", "rocketBlYe", "rocketBlue", "rocketGreen", "rocketReYe", "rocketOrange"],
                    head: ["images/logo.png", "images/fox.png", "images/text.png",
                        "https://wx.qlogo.cn/mmopen/vi_32/Rf6ClF1EHghrU71fDaGBVVhoOUmg1MLa5XokgnP8qX276XcStzAbXns6BU4FA3yljecu4liaqk0ibQJn01fOSyng/132"
                    ],
                    wrap: ele
                };
                this.settings = $.extend({}, defaults, options || {});
                this._init();
            };
            Barrager.prototype = {
                _init: function () {
                    var item = $(this.settings.wrap).find("div.new");
                    for (var i = 0; i < item.length; i++) {
                        item.eq(i).css({
                            top: this.getReandomTop() + "px",
                            color: this.getReandomColor(),
                            fontSize: this.getReandomSize() + "px"
                        });
                        item.eq(i).css({
                            right: -item.eq(i).width()
                        })
                    }
                    this.randomTime(0);
                },
                getReandomColor: function () {
                    var max = this.settings.color.length;
                    var randomNum = Math.floor(Math.random() * max);
                    return this.settings.color[randomNum];
                },
                getReandomBuilt: function () {
                    var max = this.settings.built.length;
                    var randomNum = Math.floor(Math.random() * max);
                    return this.settings.built[randomNum];
                },
                getReandomRocket: function () {
                    var max = this.settings.rocket.length;
                    var randomNum = Math.floor(Math.random() * max);
                    return this.settings.rocket[randomNum];
                },
                getReandomLogo: function () {
                    var max = this.settings.head.length;
                    var randomNum = Math.floor(Math.random() * max);
                    return this.settings.head[randomNum];
                },
                getReandomTop: function () {
                    var top = (Math.random() * 400).toFixed(1);
                    return top;
                },
                getReandomSize: function () {
                    var size = (12 + Math.random() * 20);
                    return size;
                },
                getReandomTime: function () {
                    var time = Math.floor((8 + Math.random() * 10));
                    return time * 1000;
                },
                randomTime: function (n) {
                    var obj = $(this.settings.wrap).find("div.new");
                    var _this = this;
                    var len = obj.length;
                    if (len == 0) return;
                    setTimeout(function () {
                        n++;
                        _this.randomTime(n)
                    }, 1000);
                    var item = obj.eq(n),
                        _w = item.outerWidth(!0);
                    item.animate({
                        left: -_w
                    }, _this.getReandomTime(), "linear", function () {
                        item.css({
                            right: -_w,
                            left: ""
                        });
                        item.remove();
                    }).removeClass('new');
                },
                addBarrager: function (item) {
                    var _this = this;
                    $(_this.settings.wrap).append("<div class='new " + item.style + "'><main><cite><img src='" + item.avatarUrl + "'></cite><label>" + item.note +
                        "</label></main><aside></aside></div>");
                    _this._init();
                }
            };
            $.fn.barrager = function (opt) {
                return new Barrager(this, opt);
            }
        })(jQuery);
    </script>
</body>

</html>